<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>debounce:<input type="text" id="debounce-input" /></div>
		<script>
		const inputDom = document.getElementById('debounce-input')
		
		function debounce(func, wait, immediate) {
		  // immediate 是否立即执行
		  let timeout
		  return function () {
		    const that = this // 改变执行函数内部 this 的指向
		    const args = arguments // 解决 doSomeThing event指向问题
		    clearTimeout(timeout) //  每次进来先清除上一次的 setTimeout
		    if (immediate) {
		      const callNow = !timeout //需要一个条件判断是否要去立即执行
		      timeout = setTimeout(function () {
		        timeout = null
		      }, wait)
		      // 立即执行
		      if (callNow) func.apply(that, args)
		    } else {
		      // 不会立即执行
		      timeout = setTimeout(function () {
		        func.apply(that, args)
		      }, wait)
		    }
		  }
		}
		
		function doSomeThing(e) {
		  // console.log('我是防抖～～～')
		  console.log("第一次输入会触发")
		  console.log("等间隔多少0.3秒不输入内容时候在触发")
		  // console.log(e)
		  // console.log(this);
		  // 可能会做 回调 或者 ajax 请求
		}
		
		inputDom.onkeyup = debounce(doSomeThing, 300, true)	
		</script>
	</body>
</html>
